<template>
  <el-drawer
    :append-to-body="true"
    :title="$t('workflow.flowDesign.copyerSetting')"
    v-model="copyerDrawer"
    direction="rtl"
    class="set_copyer"
    size="550px"
    :before-close="saveCopyer"
  >
    <div class="copyer_content drawer_content">
      <el-button
        type="primary"
        @click="addCopyer"
      >
        {{ $t("workflow.flowDesign.addCopyer") }}
      </el-button>
      <p class="selected_list">
        <span
          v-for="(item, index) in copyerConfig.nodeUserList"
          :key="index"
        >
          {{ item.nickName }}
          <el-icon><ele-Close /></el-icon>
        </span>
        <a
          v-if="copyerConfig.nodeUserList && copyerConfig.nodeUserList.length != 0"
          @click="copyerConfig.nodeUserList = []"
        >
          {{ $t("workflow.flowDesign.clear") }}
        </a>
      </p>
      <el-checkbox v-model="copyerConfig.copyToSelf">
        {{ $t("workflow.flowDesign.copyToSelf") }}
      </el-checkbox>
    </div>
    <template #footer>
      <div class="mb20 mr20">
        <el-button
          @click="closeDrawer"
          size="default"
        >
          {{ $t("common.cancel") }}
        </el-button>
        <el-button
          type="primary"
          size="default"
          @click="saveCopyer"
        >
          {{ $t("common.save") }}
        </el-button>
      </div>
    </template>
    <user-choose-table
      ref="userChooseTableRef"
      @submit="sureCopyer"
    />
  </el-drawer>
</template>

<script setup lang="ts" name="CopyerDrawer">
import { ref, watch } from "vue";
import func from "../preload";
import { useFormWorkflow } from "@/stores/formWorkflow";
import { storeToRefs } from "pinia";
import UserChooseTable from "@/views/system/user/chooseTable.vue";

const userChooseTableRef = ref<InstanceType<typeof UserChooseTable> | null>(null);

// 引入 store
const formWorkflowStore = useFormWorkflow();
const { copyerDrawer, copyerConfig: copyerConfig1 } = storeToRefs(formWorkflowStore);

// 定义状态
const funcUtil = func;
const copyerConfig = ref<Record<string, any>>({});
const copyerVisible = ref(false);
const checkedList = ref<any[]>([]);

// 监听
watch(
  copyerConfig1,
  val => {
    if (!val) return;
    copyerConfig.value = val.value;
  },
  { immediate: true, deep: true }
);

// 方法
const addCopyer = () => {
  copyerVisible.value = true;
  checkedList.value = copyerConfig.value.nodeUserList || [];
  userChooseTableRef.value.showDialog(checkedList.value);
};

const sureCopyer = (data: any[]) => {
  copyerConfig.value.nodeUserList = data.map(item => {
    return {
      id: item.id,
      userName: item.userName,
      nickName: item.nickName
    };
  });
  copyerVisible.value = false;
};

const saveCopyer = () => {
  // copyerConfig.value.ccSelfSelectFlag = ccSelfSelectFlag.value.length === 0 ? 0 : 1;
  copyerConfig.value.error = !funcUtil.copyerStr(copyerConfig.value);
  formWorkflowStore.updateCopyerConfig({
    value: copyerConfig.value,
    flag: true,
    id: copyerConfig1.value.id
  });
  closeDrawer();
};

const closeDrawer = () => {
  formWorkflowStore.updateCopyer();
};
</script>

<style lang="scss">
.set_copyer {
  .copyer_content {
    padding: 20px 20px 0;

    .el-button {
      margin-bottom: 20px;
    }

    .el-checkbox {
      margin-bottom: 20px;
    }
  }
}
</style>
